<template>
  <div class="default-main" :style="{ height: fullHeight + 'px' }">
    <div class="head"></div>
    <div class="route">
      <div class="route-left">
        <div class="route-text" @click="loginSP">农村宅基地审批系统</div>
      </div>
      <div class="route-right">
        <div class="route-text">农村不动产登记平台</div>
      </div>
    </div>

    <el-row class="body">
      <el-col :span="6" class="body-left"
        ><div class="left-top">
          <div class="icon-font">
            <div class="icon"></div>
            <div class="font">阶段统计</div>
          </div>
          <div id="task" style="width: 100%; height: 80%"></div>
        </div>
        <div class="left-middle">
          <div class="curve"></div>
        </div>
        <div class="left-bottom">
          <div class="icon-font">
            <div class="icon"></div>
            <div class="font">审批办理</div>
          </div>
          <div id="container" style="height: 100%; width: 100%"></div></div
      ></el-col>
      <el-col :span="10" class="body-center"
        ><el-row class="center-top">
          <el-col :span="4" class="center-top-detail">
            <div class="center-top-text">宅基地审批</div>
            <div class="center-top-num">{{ firstNum }}</div>
          </el-col>
          <el-col :span="4" class="center-top-detail">
            <div class="center-top-text">宅基地清理</div>
            <div class="center-top-num">{{ secondNum }}</div>
          </el-col>
          <el-col :span="4" class="center-top-detail">
            <div class="center-top-text">宅基地流转</div>
            <div class="center-top-num">{{ thirdNum }}</div>
          </el-col>
          <el-col :span="4" class="center-top-detail">
            <div class="center-top-text">宅基地执法</div>
            <div class="center-top-num">{{ gatherNum }}</div>
          </el-col>
        </el-row>
        <div class="center-middle">
          <dv-flyline-chart
            :config="config"
            class="fly-chart"
            style="opacity: 0.9"
          />
        </div>
        <el-row class="center-top">
          <div class="center-bottom-detail">
            <div class="bottom-percent">
              <div class="center-bottom-text">18-30岁</div>
              <div class="center-bottom-num">{{ firstPercent }}</div>
            </div>
            <el-progress
              type="circle"
              :percentage="firstPercent"
              class="center-bottom-icon"
              :stroke-width="4"
              :width="50"
              :color="progressColor"
            ></el-progress>
          </div>
          <div class="center-bottom-detail">
            <div class="bottom-percent">
              <div class="center-bottom-text">30-45岁</div>
              <div class="center-bottom-num">{{ secondPercent }}</div>
            </div>
            <el-progress
              type="circle"
              :percentage="secondPercent"
              class="center-bottom-icon"
              :stroke-width="4"
              :width="50"
              :color="progressColor"
            ></el-progress>
          </div>
          <div class="center-bottom-detail">
            <div class="bottom-percent">
              <div class="center-bottom-text">45-60岁</div>
              <div class="center-bottom-num">{{ thirdPercent }}</div>
            </div>
            <el-progress
              type="circle"
              :percentage="thirdPercent"
              class="center-bottom-icon"
              :stroke-width="4"
              :width="50"
              :color="progressColor"
            ></el-progress>
          </div>
          <div class="center-bottom-detail">
            <div class="bottom-percent">
              <div class="center-bottom-text">60岁以上</div>
              <div class="center-bottom-num">{{ gatherPercent }}</div>
            </div>
            <el-progress
              type="circle"
              :percentage="gatherPercent"
              class="center-bottom-icon"
              :stroke-width="4"
              :width="50"
              :color="progressColor"
            ></el-progress>
          </div>
        </el-row>
      </el-col>
      <el-col :span="6" class="body-right">
        <div class="right-top">
          <div class="icon-font">
            <div class="icon"></div>
            <div class="font">信息展示</div>
          </div>
          <br />
          <br />
          <div class="sroll"><vue-seamless></vue-seamless></div>
        </div>
        <div class="right-middle">
          <div class="curve"></div>
        </div>
        <div class="right-bottom">
          <div class="icon-font">
            <div class="icon"></div>
            <div class="font">执法情况</div>
          </div>
          <div class="zf"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import HighCharts from "highcharts";
import highchartsMore from "highcharts/highcharts-more";
highchartsMore(HighCharts);
import vueSeamless from "./component/scroll";
export default {
  components: {
    vueSeamless,
  },
  data() {
    return {
      config: {
        centerPoint: [0.48, 0.35],
        points: [
          [0.52, 0.23],
          [0.43, 0.29],
          [0.59, 0.35],
          [0.53, 0.47],
          [0.45, 0.54],
          [0.36, 0.38],
          [0.62, 0.55],
          [0.56, 0.56],
          [0.37, 0.66],
          [0.55, 0.81],
          [0.55, 0.67],
          [0.37, 0.29],
          [0.2, 0.36],
          [0.76, 0.41],
          [0.59, 0.18],
          [0.68, 0.17],
          [0.59, 0.1],
        ],
        bgImgUrl: "http://localhost:8080/map.jpg",
      },
      fullHeight: document.body.offsetHeight,
      progressColor: "#f56c6c",
      firstPercent: 50,
      secondPercent: 23,
      thirdPercent: 22,
      gatherPercent: 5,
      firstNum: 12,
      secondNum: 20,
      thirdNum: 5,
      gatherNum: 10,
      option: {
        chart: {
          backgroundColor: "#0A0D18",
        },
        legend: {
          align: "right",
          itemMarginTop: 0,
          verticalAlign: "top",
          itemStyle: {
            color: "#ffffff",
          },
        },
        credits: { enabled: false },
        title: {
          text: "",
        },
        xAxis: {
          categories: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
          crosshair: true,
          textStyle: {
            color: "#ffffff",
          },
        },
        yAxis: {
          min: 0,
          allowDecimals: false,
          title: {
            text: "办件量（件）",
          },
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          // head + 每个 point + footer 拼接成完整的 table
          headerFormat:
            '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat:
            '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y} 件</b></td></tr>',
          footerFormat: "</table>",
          shared: true,
          useHTML: true,
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
        },
        series: [
          {
            name: "接件量",
            data: [12, 5, 7, 5, 14, 8, 23, 2, 12, 4, 15, 36],
          },
          {
            name: "规划许可量",
            data: [2, 3, 4, 4, 11, 8, 23, 12, 5, 4, 15, 14],
          },
          {
            name: "施工管理量",
            data: [23, 11, 13, 12, 14, 8, 11, 7, 12, 6, 9, 9],
          },
          {
            name: "竣工验收量",
            data: [4, 4, 5, 12, 12, 21, 15, 12, 17, 14, 10, 9],
          },
        ],
      },
      spData: {
        credits: { enabled: false },
        chart: {
          polar: true,
          type: "line",
          backgroundColor: "#0A0D18",
        },
        title: {
          text: "",
        },
        pane: {
          size: "80%",
        },
        xAxis: {
          categories: ["规划许可", "施工管理", "竣工验收", "业务归档"],
          tickmarkPlacement: "on",
          lineWidth: 0,
        },
        yAxis: {
          gridLineInterpolation: "polygon",
          lineWidth: 0,
          min: 0,
        },
        tooltip: {
          shared: true,
        },
        legend: {
          floating: true,
          align: "right",
          verticalAlign: "top",
          y: 70,
          layout: "vertical",
          itemStyle: {
            color: "#ffffff",
          },
        },
        series: [
          {
            name: "已到场",
            data: [43, 19, 6, 35],
            pointPlacement: "on",
          },
          {
            name: "未到场",
            data: [50, 39, 42, 31],
            pointPlacement: "on",
          },
        ],
      },
    };
  },
  created: function () {},
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          that.timer = false;
        }, 400);
      }
    },
  },
  mounted() {
    this.get_bodyHeight();
    this.chart();
    this.chartSp();
  },
  methods: {
    get_bodyHeight() {
      //动态获取浏览器高度
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.body.offsetHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },
    zfStyleTable({ row, column, rowIndex, columnIndex }) {
      return "background:#0a0d18;color:#ffffff:margin:0;padding:10px 0 5px 0 ";
    },
    chartSp() {
      HighCharts.chart("container", this.spData);
    },
    loginSP() {
      this.$router.push({
        path: "/login",
      });
    },
    chart() {
      HighCharts.chart("task", this.option);
    },
  },
};
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
.default-main {
  background: url("~@/assets/img/default/background.png") no-repeat;
  background-size: 100% 100%;
}
.head {
  height: 7%;
  background: url("~@/assets/img/default/heand.png") no-repeat;
  background-size: 100% 100%;
}
.route {
  position: absolute;
  left: 0;
  right: 0;
  width: 900px;
  margin: -30px auto;
}
.route-left {
  height: 30px;
  width: 281px;
  background: url("~@/assets/img/default/route-left.png") no-repeat;
  background-size: 100% 100%;
  float: left;
}
.route-text {
  font-family: FZLTDHK--GBK1-0;
  font-size: 15px;
  color: #8d8d90;
  letter-spacing: 0;
  text-align: center;
  padding-top: 5px;
}
.route-text {
  cursor: pointer;
}
.route-right {
  height: 30px;
  width: 281px;
  background: url("~@/assets/img/default/route-right.png") no-repeat;
  background-size: 100% 100%;
  float: right;
}
.body {
  margin-top: 10px;
  height: 90%;
}
.body-left {
  height: 100%;
  float: left;
  margin-left: 3%;
}
.body-center {
  height: 100%;
  float: left;
}
.body-right {
  height: 100%;
  margin-left: 10px;
}
.left-top {
  height: 45%;
}
.left-middle {
  height: 10%;
}
.left-bottom {
  height: 40%;
}
.center-top {
  height: 10%;
}
.center-middle {
  width: 100%;
  height: 60%;
}
.center-bottom {
  height: 10%;
}

.right-top {
  height: 45%;
}
.right-middle {
  height: 10%;
}
.right-bottom {
  height: 40%;
}
.icon {
  height: 20px;
  width: 18px;
  background: url("~@/assets/img/default/icon.png") no-repeat;
  float: left;
  margin-top: 2px;
}
.font {
  font-family: FZCCHJW--GB1-0;
  font-size: 18px;
  color: #48dfff;
  letter-spacing: 0;
  float: left;
  margin-left: 5px;
}
.curve {
  width: 100%;
  height: 54px;
  text-align: center;
  position: relative;
  background: url("~@/assets/img/default/fff.png");
  background-size: 100% 100%;
}
.body {
  background: #0a0d18;
}
.center-top {
  margin: 5% 5% 5% 5%;
  border: 1px solid #293246;
  border-radius: 20px;
  text-align: center;
}
.center-top-detail {
  margin: 2.5% 0 0 0;
  float: left;
  text-align: center;
  height: 100%;
  width: 25%;
}
.center-top-text {
  font-family: PingFangSC-Semibold;
  font-size: 20px;
  color: #ffffff;
  letter-spacing: 0;
}
.center-top-num {
  font-family: Antonio-Bold;
  font-size: 30px;
  color: #48dfff;
  letter-spacing: 0;
}
.center-bottom {
  margin-top: 5%;
  height: 10%;
  border: 1px solid #293246;
  border-radius: 20px;
  text-align: center;
  width: 100%;
}
.center-bottom-detail {
  float: left;
  height: 100%;
  width: 25%;
  margin: 0 auto;
}
.center-bottom-text {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0.57px;
  text-align: center;
}
.center-bottom-num {
  font-family: Antonio-Regular;
  font-size: 28px;
  color: #ffffff;
  letter-spacing: 1px;
  text-align: center;
}
.center-bottom-icon {
  float: left;
  border: #0a0d18;
  text-align: center;
  margin-top: 10%;
}
.center-bottom-icon .el-progress__text {
  font-size: 14px;
  color: #ffffff;
}

.bottom-percent {
  float: left;
  margin: 10% 0 0 15%;
}
.icon-font {
  width: 100%;
}
.sroll {
  width: 100%;
}
.zf {
  height: 100%;
  width: 80%;
  background: url("~@/assets/img/default/zf.png");
  background-size: 100% 100%;
  text-align: center;
  margin-left: 5%;
}
.right-bottom {
  margin-top: 30px;
  width: 100%;
  text-align: center;
}
.fly-chart {
  width: 100%;
  height: 100%;
}
.dv-flyline-chart {
  background-image: url("~@/assets/img/default/map.jpg");
}
text {
  color: #ffffff;
  fill: #ffffff;
}
</style>